<script lang="ts">
export default {
  name: 'ViInput',
  props: {
    underline: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    }
  }
}
</script>


<template>
  <div class="vivid-input-wrapper">
    <input class="vivid-input" :placeholder="placeholder">
    <div class="underline" v-if="underline"></div>
  </div>
</template>

<style scoped lang="scss">
.vivid-input-wrapper {
  position: relative;
  width: 200px;
}

.vivid-input {
  border: 2px solid transparent;
  width: 100%;
  height: 2.5em;
  padding-left: 0.8em;
  outline: none;
  background-color: #F3F3F3;
  border-radius: 5px;
  transition: all 0.5s;
}

.underline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: #333;
  transform: scaleX(0);
  transition: all 0.3s ease;
}

.vivid-input-wrapper input:focus~.underline {
  transform: scaleX(1);
}
</style>
